<template>
	<view>
		<view class="">
			<view class="wrap">
				<u-row gutter="16">
					<u-col span="5">
						<view class="demo-layout bg-purple">个人支付列表</view>
					</u-col>
				</u-row>
			</view>
			<view v-for="item in list " :key="item" class="" >
				<u-card :title="item.project_name" :sub-title="arr[item.project_status].text" :sub-title-color="arr[item.project_status].class" @click="zhifuXq(item.id)">
					<view class="" slot="body">
						<view class="u-body-item u-flex u-row-between u-p-b-0">
							<view class="u-body-item-title u-line-2">
								<view class="wrap">
									<u-row gutter="16">
										<u-col span="12">
											<view class="demo-layout bg-purple">充值总数：{{item.project_sum}}</view>
										</u-col>
										<u-col span="6">
											<view class="demo-layout bg-purple-light">已付:{{item.project_receipts}}</view>
										</u-col>
										<u-col span="6">
											<view class="demo-layout bg-purple-dark" style="text-align: center;">剩余:{{item.project_surplus}}</view>
										</u-col>
										<u-col span="12" v-if="!arr[item.project_status].is_done">
											<view class="demo-layout bg-purple-dark" style="text-align: center;float: right;">
											<!-- 	<button type="default" size="mini" >支付</button> -->
											</view>
										</u-col>
									</u-row>
								</view>
							</view>
						</view>
					</view>
				</u-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [{
					text: "未完成",
					class: ' #fa3534',
					is_done: false
				}, {
					text: '完成',
					class: '#18b566',
					is_done: true
				}],
				list: [],
				limit: '',
				page: 2,
				customer_id: '',
				id: '',
				request: true
			}
		},
		onReachBottom() {
			console.log("触底了")
			if (this.request) {
				console.log("触底了222")
				this.getMore()
			}
		},
		onLoad(options) {
			this.zhifuList()
		},

		methods: {
			async zhifuList() {
				this.customer_id = uni.getStorageSync('customer_id');
				console.log(this.customer_id)
				this.$flyio.get('v1.Pay/payProjectList', {
						customer_id: this.customer_id,
						page: 1,
						limit: 10,
					}).then((ret) => {
						console.log(ret)
						this.list = ret.data.data
						// console.log(ret.data.data.id,"222222")
					})
					.catch((e) => {
						console.log(e)
					})
			},
			async getMore() {
				this.$flyio.get('v1.Pay/payProjectList', {
						customer_id: this.customer_id,
						page: this.page,
						limit: 10,
					}).then((ret) => {
						if (ret.code == 0) {
							if (ret.data.data.length > 0) {
								this.page++
								this.list = this.list.concat(ret.data.data)
							} else {
								this.request = false
								uni.showToast({
									title: '没有更多数据了',
									duration: 2000
								});
							}
						} else {}
						console.log(ret)
					})
					.catch((e) => {

					})
			},

			zhifuXq(project_id) {
				console.log(project_id,"231")
				uni.navigateTo({
					
					url: '/pages/zhifu/zhifuxiangqing?project_id=' + project_id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;

	}

	.bg-purple {
		line-height: 80rpx;

	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}
</style>
